<template>
	<view class="container">
		<!-- 项目卡片 -->
		<view class="project-card">
			<!-- <view class="project-icon">☁️</view> -->
			<view class="project-img">
				<u-image :showLoading="true" src="/static/AIImg.jpg" width="220rpx" height="290rpx"
					radius="30rpx"></u-image>
			</view>
			<view class="project-info">
				<text class="project-name">学习项目名</text>
				<text class="project-meta" style="margin-bottom: 10rpx;">共10节</text>
				<text class="project-meta">添加时间：2025-05-06</text>
				<!-- <button class="start-learning-btn" @click="startLearning">开始学习</button> -->
				<u-button type="warning" text="开始学习" class="view-task-btn" @click="startLearning(2)"></u-button>
			</view>
		</view>

		<!-- 章节进度 -->
		<view class="chapter-progress">
			<view class="last-viewed" @click="continueLearning">
				<view>
					<text class="last-viewed-label">上次看到</text>
					<text class="last-viewed-chapter">章节名 · 已学习：3/3</text>
				</view>
				<text class="arrow-icon">›</text>
			</view>

			<text class="chapter-list-title">章节目录</text>
			<!-- <scroll-view scroll-y="true">
				<view></view> -->

			<view class="chapter-list" style="overflow-y: scroll;">
				<!-- 章节1 -->
				<view class="chapter-item">
					<view class="chapter-node">1</view>
					<view class="chapter-connector"></view>
					<view class="chapter-content">
						<text class="chapter-name">第一节名称 <span style="color:  #3490fb;">（已学习）</span></text>
						<text class="chapter-progress-text">已学习：3/3</text>
					</view>
					<view class="chapter-status status-completed">已完成</view>
				</view>

				<!-- 章节2 -->
				<view class="chapter-item">
					<view class="chapter-node">2</view>
					<view class="chapter-connector"></view>
					<view class="chapter-content">
						<text class="chapter-name">第二节名称 <span style="color: #3490fb;">（已学习）</span></text>
						<text class="chapter-progress-text">已学习：3/3</text>
					</view>
					<view class="chapter-status status-completed">已完成</view>
				</view>

				<!-- 章节3 -->
				<view class="chapter-item">
					<view class="chapter-node">3</view>
					<view class="chapter-connector"></view>
					<view class="chapter-content">
						<text class="chapter-name">第三章名称 <span style="color: orangered;">（未学习）</span></text>
						<text class="chapter-progress-text">已学习：0/3</text>
					</view>
					<view class="chapter-status status-not-exam">未考试</view>
				</view>
			</view>
			<!-- </scroll-view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tasks: 1,
				// 可以在这里定义动态数据
				project: {
					name: '学习项目名',
					totalSections: 10,
					addedDate: '2025-05-06',
					lastViewed: {
						chapter: '章节名',
						progress: '3/3'
					},
					chapters: [{
							id: 1,
							name: '第一节名称（已学习）',
							progress: '3/3',
							status: 'completed'
						},
						{
							id: 2,
							name: '第二节名称（已学习）',
							progress: '3/3',
							status: 'completed'
						},
						{
							id: 3,
							name: '第三章名称（未学习）',
							progress: '0/3',
							status: 'not-exam'
						}, {
							id: 11,
							name: '第一节名称（已学习）',
							progress: '3/3',
							status: 'completed'
						},
						{
							id: 21,
							name: '第二节名称（已学习）',
							progress: '3/3',
							status: 'completed'
						},
						{
							id: 31,
							name: '第三章名称（未学习）',
							progress: '0/3',
							status: 'not-exam'
						}
					]
				}
			}
		},
		onLoad(options) {
			if (options) {
				this.tasks = options.Id;
			}
			
		},
		methods: {
			startLearning(taskId) {
				if (this.tasks == 1) {
					uni.navigateTo({
						url: `/homeNav/xxtd/components/txtView`
					})
				} else {
					uni.navigateTo({
						url: `/homeNav/xxtd/components/videoView`
					})
				}
				// 开始学习逻辑


			},

			continueLearning() {
				// 继续学习逻辑
				// uni.navigateTo({
				// 	url: '/pages/learning/continue'
				// })
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #f5f7fa;
		height: 100vh;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.project-card {
		background: white;
		border-radius: 24rpx;
		padding: 20rpx;
		margin-bottom: 40rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
		display: flex;
		align-items: center;
		box-sizing: border-box;
	}

	.project-img {
		// display: inline-block;
		// padding: 25rpx;
	}

	.project-info {
		flex: 1;
		margin-left: 20rpx;
	}

	.project-name {
		font-size: 36rpx;
		font-weight: 700;
		margin-bottom: 16rpx;
		color: #262626;
		display: block;
	}

	.project-meta {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 30rpx;
		display: block;
	}

	.start-learning-btn {
		background: #ff7900;
		color: white;
		border: none;
		border-radius: 12rpx;
		padding: 10rpx 40rpx;
		font-size: 28rpx;
		font-weight: 500;
		display: inline-block;
	}

	.view-task-btn {
		width: auto !important;
		min-width: 120rpx;
		display: inline-flex !important;
		padding: 0 30rpx !important;
		white-space: nowrap;
	}

	.chapter-progress {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow-y: scroll;
		background: white;
		border-radius: 24rpx;
		padding: 40rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
	}

	.last-viewed {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.last-viewed-label {
		font-size: 28rpx;
		color: #8c8c8c;
		display: block;
		margin-bottom: 10rpx;
	}

	.last-viewed-chapter {
		font-size: 32rpx;
		font-weight: 500;
		color: #262626;
		display: block;
	}

	.arrow-icon {
		font-size: 36rpx;
		color: #8c8c8c;
	}

	.chapter-list-title {
		font-size: 32rpx;
		font-weight: 600;
		margin-bottom: 30rpx;
		color: #262626;
		display: block;
	}

	.chapter-list {
		flex: 1;
		// position: relative;
		padding-left: 60rpx;
	}

	.chapter-item {
		position: relative;
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
	}

	.chapter-item:last-child {
		margin-bottom: 0;
	}

	.chapter-node {
		position: absolute;
		left: -60rpx;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background: #1890ff;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 24rpx;
		z-index: 2;
	}

	.chapter-connector {
		position: absolute;
		left: -42rpx;
		top: 40rpx;
		bottom: -40rpx;
		width: 4rpx;
		background: #1890ff;
		z-index: 1;
	}

	.chapter-item:last-child .chapter-connector {
		display: none;
	}

	.chapter-content {
		flex: 1;
	}

	.chapter-name {
		font-size: 32rpx;
		margin-bottom: 10rpx;
		color: #262626;
		display: block;
	}

	.chapter-progress-text {
		font-size: 28rpx;
		color: #8c8c8c;
		display: block;
	}

	.chapter-status {
		margin-left: 30rpx;
		padding: 8rpx 20rpx;
		border-radius: 24rpx;
		font-size: 24rpx;
		font-weight: 500;
	}

	.status-completed {
		background: #f6ffed;
		color: #52c41a;
		border: 2rpx solid #b7eb8f;
	}

	.status-not-exam {
		background: #fff7e6;
		color: #fa8c16;
		border: 2rpx solid #ffd591;
	}

	/* 响应式设计 */
	// @media (max-width: 750px) {
	// 	.project-card {
	// 		flex-direction: column;
	// 		text-align: center;
	// 	}

	// 	.project-icon {
	// 		margin-right: 0;
	// 		margin-bottom: 30rpx;
	// 	}

	// 	.chapter-item {
	// 		flex-direction: column;
	// 		align-items: flex-start;
	// 	}

	// 	.chapter-status {
	// 		margin-left: 0;
	// 		margin-top: 20rpx;
	// 		align-self: flex-start;
	// 	}
	// }
</style>